<template>
	<view class="submit-order">
		<u-sticky>
			<u-tabs :list="list" active-color="#e87722" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="flex flex-column fs-28  border-top pt-2 px-2 bg-white position-relative"
			v-if="current === 0 && publicWeb.ziti_display" @tap="openBuiltInMap()">
			<view class="mb-2">店铺名称：{{storeDetail.merchant_name}}</view>
			<view class="mb-2 flex align-center">店铺地址：<text class="">{{storeDetail.detail_address}}</text></view>
			<!--#ifndef H5-->
			<uni-icons class="position-absolute top-0 right-0 mt-3 mr-2" type="right"
				style="color: #bababa;width:40px;height:40px;" size="20"></uni-icons>
			<!--#endif-->
			<div class="bar"></div>
		</view>
		<div class=" border-top bg-white position-relative" v-else @click="navTo('/pages/my/addressList?type=order')">
			<div class="user-box flex">
				<div class="flex-1">
					<div v-if="!currentAddress.id">请选择地址</div>
					<div class="user-address" v-if="currentAddress.id">
						<!-- 省市区 -->
						<div class="flex flex-a-c">
							<!-- <span class="default" v-if="address.isDefault">默认</span> -->
							<div class="address-list">
								<span class="address-item">
									{{currentAddress.province}}
								</span>
							</div>
						</div>
						<!-- 详细地址 -->
						<div class="user-address-detail flex-2">
							{{currentAddress.city}} {{currentAddress.district}}
						</div>
						<!-- 姓名 手机号 -->
						<div>
							<span>{{currentAddress.address}}</span>
							<span class="mobile">{{currentAddress.mobile}}</span>
						</div>
					</div>
				</div>
				<uni-icons type="right" style="color: #bababa" size="20"></uni-icons>
			</div>
			<!-- 背景 -->
			<div class="bar"></div>
		</div>

		<div class="flex flex-column bg-white p-2 mt-2">
			<div class="fs-32 font-weight-bold mb-2 border-bottom pb-2">{{storeDetail.merchant_name}}</div>
			<view class="flex align-center">
				<div class="goods-image">
					<u-image borderRadius="10rpx" width="140rpx" height="140rpx" :src="storeDetail.merchant_img" alt />
				</div>
				<div class="flex flex-column ml-2 flex-1">
					<p class="goods-name fs-32 font-weight-bold text-black mb-1">{{goodsDetail.goods_name}}</p>
					<view class="flex align-center fs-24 justify-between">
						<text class="ft666666">规格：{{skuText}}</text>
						<text class="ft666666">x{{num}}</text>
					</view>
					<view class="flex fte87722 fs-24">
						￥{{day_amount}}/天
					</view>
				</div>
			</view>
		</div>


		<view class="bg-white mt-2 p-2">
			<view class="flex align-center justify-between fs-28   py-2">
				<text>押金</text>
				<text class="fs-38 font-weight-bold">¥{{goodsDetail.deposit_amount}}</text>
			</view>
			<view class="flex align-center justify-between fs-28   py-2">
				<text>租金</text>
				<text class="fs-38 font-weight-bold ">¥{{Number(totalRentMoney).toFixed(2)}}</text>
			</view>
			<view class="flex align-center justify-between fs-28   py-2">
				<text>总金额</text>
				<text class="fs-38 font-weight-bold fte87722">¥{{Number(totalMoney).toFixed(2)}}</text>
			</view>
			<!-- <view class="flex align-center justify-between fs-28  py-2">
				<text>店铺优惠</text>
				<view class="flex align-center">
					<text>共0张，0张可用</text>
					<uni-icons type="right" style="color: #666" size="25"></uni-icons>
				</view>
			</view> -->
		</view>

		<!--#ifdef MP-ALIPAY-->
		<!-- <view class="bg-white rounded-lg p-2 mt-2">
			<view class="flex align-center mb-2">
				<image src="/static/images/zhima.jpg" mode="widthFix" style="width: 150rpx;"></image>
				<text class="mx-1 fs-24">|</text>
				<text class="fs-24 mr-1">免押金</text>
				<text class="fs-24 rounded px-2" style="color: #1890ff;border:1px solid #1890ff;">芝麻分≥600可享</text>
			</view>
			<view class="fs-24 ft666666">点击“去免押”，授权成功获取免押额度</view>
		</view> -->
		<!--#endif-->

		<view class="flex align-center justify-between bg-white mt-2 p-2 position-relative" style="z-index: 0;">
			<text>订单备注</text>
			<input class="flex-1 ml-2 fs-24" style="text-align: right;" v-model.trim="remark" type="text" placeholder="备注" />
		</view>

		<view class="bg-white fs-24 p-2 position-fixed left-0 right-0 bottom-0">
			<!--#ifdef MP-ALIPAY-->
			<view class="fte87722 fs-20 mb-1">租赁押金将从您的支付宝账户中被冻结，而不是直接被扣除，待归还物品后将自动解冻</view>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY-->
			<view class="fte87722 fs-20 mb-1">押金在物品归还后，自动回退至原账户</view>
			<!--#endif-->
			<view class="flex align-center mb-2">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="square" class="flex" label-size="0" activeColor="#e87722" />
				</u-checkbox-group>
				<view>我已阅读并同意<text @tap="navigateToPrivacy('USER_AGREEMENT')" class="fte87722">《租赁服务协议》</text>与<text
						class="fte87722" @tap="navigateToPrivacy('PRIVACY_POLICY')">《隐私服务协议》</text></view>
			</view>
			<view class="flex align-center justify-between">
				<text class="fs-32 text-black">待支付：¥{{Number(totalMoney).toFixed(2)}}</text>
				<!--#ifndef MP-ALIPAY-->
				<view class="rounded-circle text-white py-1 text-center fs-32 bge87722" style="width: 400rpx;"
					@click="submitFn">去租赁</view>
				<!--#endif-->

				<!--#ifdef MP-ALIPAY-->
				<view class="rounded-circle text-white py-1 text-center fs-32 bg1890ff" style="width: 400rpx;"
					@click="submitFn">去租赁</view>
				<!--#endif-->
			</view>

		</view>

		<view style="height: 100px;"></view>
		<!--实名认证-->
		<u-modal :confirm-color="lightColor" v-model="verificationShow" :show-cancel-button="true" title="实名认证"
			@confirm="confirmVerif">
			<view class="flex flex-column align-center pt-5 mb-4 px-2">
				<input class="w-100 mb-2" type="text" v-model.trim="ruleForm.real_name" placeholder="请输入姓名">
				<input class="w-100 " type="text" v-model.trim="ruleForm.id_card" placeholder="请输入身份证号">
			</view>
		</u-modal>

		<u-modal :confirm-color="lightColor" v-model="agreementShow" title="温馨提示" cancel-text="不同意" confirm-text="同意"
			:show-cancel-button="true" @confirm="agreementFn()">
			<view class=" fs-24 text-center my-3">已阅读并同意<text class="fte87722"
					@click="navigateToPrivacy('PRIVACY_POLICY')">《隐私协议》</text> 与
				<text class="fte87722" @click="navigateToPrivacy('USER_AGREEMENT')">
					《用户协议》
				</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		applyDistribution
	} from "@/api/goods.js";
	import {
		orderCreate,
		paymentCreate,
		getSignUrl
	} from "@/api/order.js";
	import {
		getUserInfo
	} from "@/api/members.js";
	import storage from "@/utils/storage.js"; //缓存
	import config from '@/config/api.js'
	export default {
		data() {
			return {
				ruleForm: {
					real_name: "",
					id_card: "",
				},
				lightColor: this.$lightColor,
				list: [{
					name: '物流'
				}],
				current: 0,
				remark: '',
				checked: false,
				goodsId: '',
				specId: '',
				goodsDetail: {},
				storeDetail: {},
				skuText: '',
				specs: {},
				num: 0,
				currentAddress: {},
				openId: '', // 用户的openId
				verificationShow: false,
				day_amount: 0,
				publicWeb: {},
				agreementShow: false,
			}
		},
		computed: {
			totalRentMoney() {
				return this.specs.price * this.num
			},
			totalMoney() {
				return ((this.specs.price * this.num || 0) + this.goodsDetail.deposit_amount) || 0
			}
		},
		onShow() {
			const tradeRouter = uni.getStorageSync('tradeRouter')
			if (tradeRouter) {
				this.currentAddress = tradeRouter
			}

		},
		onLoad(query) {
			this.publicWeb = uni.getStorageSync('publicWeb') || {}
			if (this.publicWeb.ziti_display) {
				this.list = [{
					name: '自提'
				}, {
					name: '物流'
				}]
			}
			this.goodsId = query.goodsId
			this.specId = query.specId
			this.num = query.num
			this.getGoodsDetail()
		},
		methods: {
			agreementFn() {
				this.checked = true
				this.submitFn()
			},
			openBuiltInMap() {
				//#ifndef H5
				uni.openLocation({
					// 目标经纬度（必填）
					latitude: Number(this.storeDetail.latitude),
					longitude: Number(this.storeDetail.longitude),
					// 目标名称（显示在地图上）
					name: this.storeDetail.merchant_name,
					// 详细地址（点击气泡时显示）
					address: `${this.storeDetail.detail_address}`,
					// 缩放级别（1-28，默认16）
					scale: 16,
					success: () => {
						console.log("打开内置地图成功");
					},
					fail: (err) => {
						console.error("打开地图失败：", err);
						uni.showToast({
							title: "导航失败，请重试",
							icon: "none"
						});
					}
				});
				//#endif
			},
			confirmVerif() {
				if (Object.keys(this.ruleForm).some(key => !this.ruleForm[key])) {
					uni.showToast({
						title: "请完善实名认证信息!",
						duration: 2000,
						icon: "none",
					});
					return;
				}
				applyDistribution(this.ruleForm).then((res) => {
					if (res.code === 1) {
						uni.showToast({
							title: "认证提交成功!",
							duration: 2000,
							icon: "none",
						});
						this.getInfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			getInfo() {
				getUserInfo().then((res) => {
					const data = res.data
					if (data) {
						storage.setUserInfo(data);
					}
				});
			},
			submitFn() {
				const token = storage.getAccessToken();
				if (!token) {
					var pages = getCurrentPages();
					var page = pages[pages.length - 1];
					uni.setStorageSync('prepage_url', page.$page.fullPath)
					console.log('完整路径：', page.$page.fullPath);
					uni.redirectTo({
						url: '/pages/passport/login'
					})
					return;
				}
				if (!this.checked) {
					this.agreementShow = true
					return;
				}
				const userInfo = storage.getUserInfo()
				if (userInfo.verification_status != 1) {
					this.verificationShow = true
					return;
				}
				const data = {
					sku_id: this.specId,
					goods_num: this.num,
					logistics_type: '2',
				}
				if (this.publicWeb.ziti_display) {
					data.logistics_type = this.current === 1 ? '2' : '1'
				}
				if (data.logistics_type == '2') {
					data.address_id = this.currentAddress.id
				}
				if (this.remark) {
					data.remark = this.remark
				}
				uni.showLoading()
				orderCreate(data).then(res => {
					if (res.code === 1) {
						uni.redirectTo({
							url: `/pages/navigation/webview?type=READ_FILE&sn=${res.data.order_id}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideLoading()
						}, 2000)
					}
				})
			},
			getSignUrl(data) {
				getSignUrl({
					redirect_url: `${config.h5}/pages/h5/h5?sn=${data.order_id}`,
					order_id: data.order_id
				}).then(res => {
					uni.hideLoading()
					const url = res.data.sign_url
					uni.redirectTo({
						url: `/pages/navigation/webview?url=${encodeURIComponent(url)}`
					})
				})
			},
			paymentCreate(data) {
				const openid = uni.getStorageSync('openId')
				paymentCreate({
					order_id: data.order_id,
					payment_method: 'wechat',
					openid: openid
				}).then(res => {

				})
			},
			getGoodsDetail() {
				getGoodsDetail({
					id: this.goodsId
				}).then(res => {
					this.goodsDetail = res.data.goods
					this.storeDetail = res.data.merchant
					if (this.goodsDetail.sku_attr.length > 0) {
						const obj = this.goodsDetail.sku.skus.find(item => String(item.id) === String(this.specId))
						if (obj) {
							console.log(obj)
							this.specs = obj
							this.specs.dayNum = obj.specs['租期']
							this.skuText = Object.keys(obj.specs).map(key => {
								return key === "租期" ? obj.specs[key] + '天' : obj.specs[key]
							}).join(',')
							this.day_amount = Number(this.specs.price / this.specs.dayNum).toFixed(2)
						}
						// 
					}
				})
			},
			change(index) {
				this.current = index;
			},
			navTo(url) {
				const token = storage.getAccessToken();
				if (!token) {
					var pages = getCurrentPages();
					var page = pages[pages.length - 1];
					uni.setStorageSync('prepage_url', page.$page.fullPath)
					console.log('完整路径：', page.$page.fullPath);
					uni.redirectTo({
						url: '/pages/passport/login'
					})
					return;
				}
				uni.navigateTo({
					url
				})
			},
			navigateToPrivacy(val) {
				console.log(val)
				uni.navigateTo({
					url: "/pages/navigation/webview?type=" + val,
				});
			},
		}
	}
</script>

<style lang="scss">
	.submit-order {
		overflow-y: auto;

		.uni-icons.uniui-right {
			width: 40px;
			height: 40px;
			position: absolute;
			right: 0;
			top: 10px;
		}

		::v-deep .u-checkbox__label {
			margin-right: 2px;
		}

		.main-color {
			color: $main-color;
			font-weight: bold;
		}

		.uinput {
			::v-deep input {
				text-align: right;
			}
		}

		.promotionNotice {
			font-size: 24rpx;
			margin: 20rpx 0;
			color: $aider-light-color;
		}

		.nums {
			flex: 2;
			color: $light-color;

			text-align: center;
		}

		.wait {
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #cccccc;
			text-align: center;
		}

		.line {
			margin-left: 14rpx;
			margin-right: 14rpx;
			margin-bottom: 50rpx;
			width: 143rpx;
			border-bottom: 2px dotted #999;
		}

		.tabbar-left {
			margin-left: 32rpx;
		}

		.btn-one,
		.wait {
			margin-top: 14rpx;
		}

		.btn-one {
			width: 100rpx;
			height: 40rpx;
			background: $light-color;
			border-radius: 20rpx;
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #ffffff;
			text-align: center;
			line-height: 40rpx;
		}

		.head-img {
			width: 81rpx;
			height: 81rpx;
			margin: 0 auto;
		}

		.group-title {
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: $light-color;
		}

		.group-box {
			height: 242rpx;
			align-items: center;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;
		}

		.group {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.tr {
			text-align: right;
		}

		.tl {
			text-align: left;
		}

		::v-deep .u-col-3 {
			text-align: right;
		}

		.bar {
			height: 4rpx;
			overflow: hidden;
			width: 100%;
			background: url("@/pages/order/imgs/line.png") no-repeat;
		}

		.box2 {
			margin-top: 20rpx;
		}

		.notSupportFreight {
			position: fixed;

			bottom: calc(100rpx + env(safe-area-inset-bottom));
			// #ifdef H5
			bottom: 100rpx;
			// #endif
			display: flex;
			align-items: center;
			left: 0;
			background: #fdf6ec;
			height: 100rpx;
			width: 100%;
			transition: 0.35s;

			>.tips {
				margin: 0 32rpx;
			}
		}

		::v-deep .u-notice-bar-wrap {
			width: 100% !important;
		}

		.box6 {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			overflow: hidden;
			line-height: 100rpx;
			margin-bottom: 0px !important;
			background: #fff;
			color: #333;
			display: flex;
			justify-content: space-between;
		}

		.tabbar-right {
			margin-top: 10rpx;
			height: 80rpx;
			color: #fff;
			line-height: 80rpx;
			background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
			padding: 0 44rpx;
			text-align: center;
			border-radius: 400px;
			margin-right: 32rpx;
		}

		.sp_tag {
			display: inline;
			background: #f2f2f2;
			padding: 0 20rpx 0 10rpx;
			height: 20rpx;
			line-height: 20rpx;
			font-size: 24rpx;
			color: #262626;
			border-radius: 0.4em;
		}

		.goods-promotion {
			float: left;
			width: 75%;
			margin: 4rpx 0;
		}

		.sp_tag_plain {
			margin-left: 8rpx;
			padding: 0 6rpx 0 6rpx;
			background: #fff;
			border: 1px solid $main-color;
			font-size: 24rpx;
			color: $main-color;
			border-radius: 50px;
		}

		.sp_tag_plain:nth-of-type(1) {
			margin-left: 0;
		}

		.goods-name {
			flex: 8;
			font-size: 28rpx;
		}

		.sp_type {
			color: $u-tips-color;
			padding: 8rpx 0;
			font-size: 24rpx;
		}

		.number {
			color: $main-color;
			font-size: 26rpx;
			font-weight: bold;

			>span {
				font-size: 36rpx;
			}
		}

		.goods-prices {
			margin: 10rpx 0;
			color: $main-color;
			font-size: 28rpx;
			font-weight: bold;

			>.goods-price {
				font-size: 38rpx;
				padding: 0 2rpx;
			}
		}

		.box {
			border-radius: 40rpx;
			overflow: hidden;
			background: #fff;
			margin-bottom: 20rpx;
			color: #666;
			padding: 0 32rpx;
		}

		.wrapper {
			height: auto;
			background: #f7f7f7;
			padding-bottom: 200rpx;
			overflow: auto !important;
		}

		.store-name {
			margin-top: 32rpx;
			font-weight: 400;
			color: #333333;
		}

		::v-deep .u-col {
			padding: 36rpx 0 !important;
		}

		::v-deep .u-col-3,
		.tipsColor {
			color: #333;
		}

		.goods-image {
			text-align: left;
			overflow: hidden;
		}

		.default {
			background: $main-color;
			font-size: 24rpx;
			border-radius: 8rpx;
			padding: 0rpx 12rpx;
			color: #fff;
			margin-right: 20rpx;
		}

		.address-box {
			border-radius: 40rpx;
			border-top-left-radius: 0 !important;
			border-top-right-radius: 0 !important;
			overflow: hidden;
			background: #fff;
			margin-bottom: 20rpx;
			color: #666;
		}

		.address-item {
			font-weight: normal;
			letter-spacing: 1rpx;
		}

		.user-box {
			padding: 32rpx;
		}

		.user-address-detail {
			color: #333;
			font-size: 38rpx;
			font-weight: bold;
			margin: 20rpx 0;
			letter-spacing: 1rpx;
		}

		.mobile {
			margin-left: 20rpx;
		}

		.price {
			font-size: 50rpx !important;
			margin: 0 2rpx;
		}

		.goods-detail {
			display: flex;
			flex-direction: column;

			justify-content: center;
			flex: 8;
			margin-left: 20rpx !important;

			>p {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.goods-item {
			margin: 20rpx 0;
		}

	}
</style>